<template>
  <div class="pages storesalesBill">
    <div class="pageLevel" v-if="!sub">
      <!-- 搜索框 -->
      <div class="tableSearch">
        <el-form label-width="100px" class="demo-ruleForm">
          <el-form-item label="" class="wxelForm" label-width="35px">
            <el-input style="width:350px" clearable v-model="selectdata.keyword" size="small" placeholder="请输入单号、商品名称、门店名称、会员手机号搜索"></el-input>
          </el-form-item>
          <el-form-item label="日期:" style="margin-left:-30px" class="billdata">
            <el-date-picker size="small" value-format="yyyy-MM-dd" unlink-panels v-model="selectdata.createTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" clearable>
            </el-date-picker>
          </el-form-item>
          <el-form-item label="订单类型:">
            <el-select v-model="selectdata.orderType" size="small" placeholder="请选择">
              <el-option label="全部" value=""></el-option>
              <el-option label="售卖" value="0"></el-option>
              <el-option label="退货" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="销售渠道:" v-if="soUrce!='5'">
            <el-select v-model="selectdata.distributionChannel" size="small" placeholder="请选择">
              <el-option label="全部" value=""></el-option>
              <el-option label="APP" value="0"></el-option>
              <el-option label="门店" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="门店类型:" v-if="soUrce!='5'">
            <el-select v-model="selectdata.selectStoreType" size="small" placeholder="请选择">
              <el-option label="全部" value=""></el-option>
              <el-option label="直营" value="0"></el-option>
              <el-option label="加盟" value="1"></el-option>
              <el-option label="联营" value="2"></el-option>
            </el-select>
          </el-form-item>
            <el-form-item label="门店:" label-width="100px" v-if="storeIf">
                  <el-select filterable size="small" v-model="selectdata.shopId" placeholder="全部">
                    <el-option label="全部" value=""></el-option>
                   <el-option v-for="(item,index) in storeLists" :key="index" :label="item.name" :value="item.id"> </el-option>
                 </el-select>
             </el-form-item>
          <el-form-item label="商品类型:">
            <el-select v-model="selectdata.shopType" size="small" placeholder="请选择">
              <el-option label="全部" value=""></el-option>
              <el-option label="商品" value="0"></el-option>
              <el-option label="服务" value="2"></el-option>
              <el-option label="计次卡" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="支付类型:">
            <el-select v-model="selectdata.payType" size="small" placeholder="请选择">
              <el-option label="全部" value=""></el-option>
              <el-option label="现金" value="3"></el-option>
              <el-option label="银行卡" value="2"></el-option>
              <el-option label="会员卡" value="4"></el-option>
              <el-option label="微信" value="0"></el-option>
              <el-option label="支付宝" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" class="wxelForm" label-width="15px">
            <el-button type="primary" size="mini" @click="search">搜索</el-button>
          </el-form-item>
          <el-form-item label="" label-width="15px" style="margin-left:13px">
            <el-button type="primary" v-if="setRole('导出')" icon="el-icon-download" @click="download" size="mini" class="Button">导出</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="tableMain">
        <el-table ref="multipleTable" :data="tableDatas" stripe style="width: 60%;margin-bottom:50px;margin-top:20px;">
          <el-table-column prop="xjPayAmount"  label="现金总计" align="center"></el-table-column>
          <el-table-column prop="yhkPayAmount" label="银行卡总计" align="center"></el-table-column>
          <el-table-column prop="hyPayAmount"  label="会员卡总计" align="center"></el-table-column>
          <el-table-column prop="wxPayAmount" label="微信总计" align="center"></el-table-column>
          <el-table-column prop="zfbPayAmount" label="支付宝总计" align="center"></el-table-column>
          <el-table-column prop="amount" label="总计金额" align="center"></el-table-column>
        </el-table>
      </div>
      <!-- 表格 -->
      <div class="tableMain">
        <el-table ref="multipleTable" :data="tableData" stripe style="width: 100%" height="500">
          <el-table-column prop="orderCode" fixed label="单号" align="center" width="160"></el-table-column>
          <el-table-column prop="createTime" label="时间" align="center" width="200"></el-table-column>
          <el-table-column prop="orderType" :formatter="orderType" label="订单类型" align="center"></el-table-column>
          <el-table-column prop="source" label="销售渠道" align="center" v-if="soUrce!='5'"></el-table-column>
          <el-table-column prop="shopType" label="门店类型" align="center" v-if="soUrce!='5'"></el-table-column>
          <el-table-column prop="shopName" label="门店名称" align="center"></el-table-column>
          <el-table-column prop="goodsType" :formatter="goodsType" label="商品类型" align="center"></el-table-column>
          <el-table-column prop="goodsName" label="商品名称" align="center"></el-table-column>
          <el-table-column prop="posCode" label="收银机号" align="center" width="150"></el-table-column>
          <el-table-column prop="cashier" label="收银员" align="center"></el-table-column>
          <el-table-column prop="phone" label="会员手机号" align="center" width="150"></el-table-column>
          <el-table-column prop="originPrice" align="center" label="应收金额"></el-table-column>
          <el-table-column prop="goodsAmount" label="实收金额" align="center"></el-table-column>
          <el-table-column prop="bargainingAmount" label="议价折扣" align="center"></el-table-column>
          <el-table-column prop="memberPrice" label="会员折扣" align="center"></el-table-column>
          <el-table-column prop="totalDiscount" label="优惠均摊" align="center"></el-table-column>
          <el-table-column prop="givePrice" label="赠送优惠" align="center"></el-table-column>
          <el-table-column prop="memberPay" label="会员卡" align="center"></el-table-column>
          <el-table-column prop="cashPay" label="现金" align="center"></el-table-column>
          <el-table-column prop="bankPay" label="银行卡" align="center"></el-table-column>
          <el-table-column prop="weChatPay" label="微信" align="center"></el-table-column>
          <el-table-column prop="aliPay" label="支付宝" align="center"></el-table-column>
          <!-- <el-table-column prop="shengDanPay" label="圣旦币" align="center"></el-table-column> -->
          <el-table-column prop="name" align="center" label="操作" width="100" fixed="right">
            <template slot-scope="scope">
              <el-button size="small" @click="routerPush(scope.row.goodsType,scope.row.id,scope.row.orderType)" type="text" class="addDetail">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 页码 -->
        <div class="pageblock">
          <el-button size="small" type="primary" class="topage" @click="toPage">确定</el-button>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20,30]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalItems">
          </el-pagination>
        </div>
      </div>
    </div>
    <div class="pageLevel" v-else>
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
import util from "@/util";
import u from "@/util/state";
import { mapState } from "vuex";
import { shopSaleReport, shopSaleReportExport,selectBaseShopPageList } from "@/api";
var fileDownload = require("js-file-download");
export default {
  computed: mapState(["merchantId", "sub", "power", "soUrce","isShop"]),
  data() {
    return {
      goodsType: u.goodsType,
      orderType: u.orderTypes,
      //表格
      selectdata: {
        keyword: "",
        createTime: [],
        orderType: "",
        distributionChannel: "",
        selectStoreType: "",
        shopType: "",
        shopId:"",
        payType:"",
      },
      tableData: [],
      tableDatas:[],
      // 分页开始
      pageSize: 20,
      totalItems: 0,
      currentPage: 1,
      dataExport: {} ,//导出参数
      storeLists:[],//门店类型
      storeIf:true,
    };
  },
  created() {
    this.data();
   },
  mounted() {
    this.source=this.soUrce
    this.warehouseList()
  },
  watch: {
    sub: {
      handler: function(val, oldVal) {
        if (oldVal != null && val == false) {
          this.data();
        }
      },
      deep: true
    }
  },
  methods: {
    // 权限配置
    setRole(key) {
      return util.selectTitle(this.power, key);
    },
    // 查看路由
    routerPush(type = "", id = "", orderType = "") {
      util.routerTo(
        "/data-center/store-salesManagement/store-salesBill/store-salesDetail",
        {
          type: type,
          id: id,
          orderType: orderType
        }
      );
    },
    //------搜索
    search() {
      this.currentPage=1;
      this.supplierlist(this.pageSize, this.currentPage);
    },
    //  默认日期
    data(picker) {
      // 获取一个月之前的日期
      var monthDate = new Date();
      var monthDates = monthDate.setMonth(monthDate.getMonth() - 1);
      var monthDateB = util.foryear(monthDates);
      this.selectdata.createTime[0] = monthDateB;
      //  获取今天日期
      const nowDate = new Date();
      var nowDates = nowDate.setTime(nowDate.getTime());
      var nowDateB = util.foryear(nowDates);
      this.selectdata.createTime[1] = nowDateB;
      this.supplierlist(this.pageSize, 1);
    },
     // 门店列表
     warehouseList() {
      selectBaseShopPageList({
          businessId: this.merchantId,
          type: 3
      }).then(res => {
        this.storeLists=res.data.list
        if(this.storeLists.length=="0"){
          this.storeIf=false
        }
      });
    },
    // 获取表格数据
    supplierlist(pageSize, pageNum) {
      let Datas = {
        id: this.merchantId,
        keyword: this.selectdata.keyword, // 账单编号
        startDate: this.selectdata.createTime[0], // 开始日期
        endDate: this.selectdata.createTime[1], // 结束日期
        orderType: this.selectdata.orderType, //订单类型
        source: this.selectdata.distributionChannel, // 销售渠道
        shopType: this.selectdata.selectStoreType, // 门店类型
        isTimerCard: this.selectdata.shopType, //商品类型
        shopId:this.selectdata.shopId,//门店
        payType:this.selectdata.payType,//支付方式
        pageSize: pageSize,
        pageNum: pageNum
      };
      this.dataExport = Datas;
      shopSaleReport(Datas).then(res => {
        this.totalItems = res.data.pageTotal;
        this.tableData = res.data.list;
        this.tableDatas=[]
       let a={
          wxPayAmount:res.data.wxPayAmount,
          zfbPayAmount:res.data.zfbPayAmount,
          yhkPayAmount:res.data.yhkPayAmount,
          xjPayAmount:res.data.xjPayAmount,
          hyPayAmount:res.data.hyPayAmount,
          sdPayAmount:res.data.sdPayAmount,
          amount:res.data.amount
        }
        if(res.data.amount==""||res.data.amount==undefined){
          this.tableDatas=[]
        }else{
         this.tableDatas.push(a)
        }
      });
    },
    //跳页
    toPage() {
      this.supplierlist(this.pageSize, this.currentPage);
    },
    handleSizeChange(val) {
      this.pageSize = val;
       this.currentPage=1;
      this.supplierlist(this.pageSize, this.currentPage);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.supplierlist(this.pageSize, this.currentPage);
    },
    //12.11新增导出功能
    download() {
      if (this.tableData.length == "0") {
        this.$message.error("数据为空不能导出");
      } else {
        shopSaleReportExport(this.dataExport).then(res => {
          let fileName = "门店销售账单.xlsx";
          fileDownload(res, fileName);
        });
      }
    }
  }
};
</script>
<style>
.billdata .el-date-editor .el-range__close-icon {
  display: none;
}
</style>


